<template>
  <div class="container">
    <van-nav-bar
      class="app-nav-bar"
      title="健康管理"
      left-arrow
      @click-left="$router.back()"
    />
    <van-field
      readonly
      clickable
      name="picker"
      :value="current_date"
      label="日期"
      placeholder=""
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        @confirm="confirm"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
    <van-tabs v-model="active">
      <van-tab :title="doTitle">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
        >
          <van-cell v-for="item in doList" :key="item.id" :title="item.name + '（' + item.mobile + '）'" >
            <van-tag v-if="item.position === '中国河北省邯郸市丛台区'" type="success">{{item.position}}</van-tag>
            <van-tag v-else type="danger">{{item.position}}</van-tag>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab :title="notDoTitle">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
        >
          <van-cell v-for="item in notDoList" :key="item.id" :title="item.name + '（' + item.mobile + '）'" >
            <van-tag type="danger">未打卡</van-tag>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getSignIn } from '@/api/signIn'
import { getUser } from '@/api/user'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      showPicker: false,
      start: new Date(new Date().toLocaleDateString()).getTime(),
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2025, 12, 31),
      currentDate: new Date(),
      current_date: new Date(new Date().toLocaleDateString()).getTime().toString(),
      active: 0,
      doList: [],
      doTitle: '已打卡',
      notDoTitle: '未打卡',
      notDoList: [],
      userList: [],
      checkList: [],
      tempList: [],
      loading: false,
      finished: true
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.getAllUser()
    const yy = new Date().getFullYear()
    const mm = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
    const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
    this.current_date = yy + '-' + mm + '-' + dd
    this.getInfo({
      start: this.start,
      status: 1
    })
  },
  methods: {
    getAllUser () {
      getUser().then(res => {
        // console.log('getAllUser', res)
        // for (var i = 0; i < res.data.data.length; i++) {
        //   this.userList[i].name = res.data.data[i].name
        //   this.userList[i].mobile = res.data.data[i].mobile
        // }
        this.userList = res.data.data

        this.tempList = JSON.parse(JSON.stringify(res.data.data)) // 深拷贝
      })
    },
    getInfo (data) {
      console.log('data', data)
      getSignIn(data).then(res => {
        this.checkList = [] // 清空筛选数组
        this.notDoList = []
        this.doList = []
        console.log('getSignIn', res)
        this.doList = res.data.data
        this.doTitle = `已打卡 （${this.doList.length}）`
        // console.log('doList', this.doList)
        // console.log(this.userList)
        for (let i = 0; i < this.userList.length; i++) {
          for (let j = 0; j < this.doList.length; j++) {
            if (this.userList[i].mobile === this.doList[j].mobile) {
              // console.log(this.userList[i])
              this.checkList.push(this.userList[i])
            }
          }
        }
        // console.log('checkList', this.checkList)

        for (let j = 0; j < this.checkList.length; j++) {
          this.tempList.splice(this.checkList[j], 1)
        }
        // this.userList.splice(this.checkList[0], 1)
        this.notDoList = this.tempList
        this.notDoTitle = `未打卡 （${this.notDoList.length}）`
        // console.log(this.notDoList)
      })
    },
    confirm (value) {
      this.getAllUser()
      console.log(value)
      this.current_date = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate()
      // 先转换为标准的 yyyy-mm-dd 格式
      value = value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate() + ' ' + value.getHours() + ':' + value.getMinutes() + ':' + value.getSeconds()
      // 把 yyyy-mm-dd 转化为时间戳形式
      // console.log(new Date(value).getTime())
      this.start = new Date(value).getTime()
      console.log(this.start)
      this.getInfo({
        start: this.start,
        status: 1
      })
      this.showPicker = false
    }
  }
}
</script>

<style scoped lang="">

</style>
